import React, { Component } from 'react';
import styles from './home.scss';
import Link from 'umi/link';
import { connect } from 'react-redux';
import { Button, Table } from 'antd';
import { getList } from '../actions';

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  onButtonClick = () => {
    const { onToggerDesc, isShowDesc } = this.props;
    onToggerDesc(!isShowDesc);
  };

  componentDidMount() {
    debugger;
    this.props.onGetList();
  }
  render() {
    const { isShowDesc, listData } = this.props;
    const columns = [
      {
        title: '姓名',
        dataIndex: 'name',
      },
      {
        title: '城市',
        dataIndex: 'city',
      },
      {
        title: '性别',
        dataIndex: 'sex',
        render: (text, record) => (text === 0 ? '女' : '男'),
      },
      {
        title: '邮箱',
        dataIndex: 'email',
      },
    ];
    return (
      <div className="home-container">
        <p className={styles.orange}>Home 页面styles.orange</p>
        <Link to="/center">个人中心</Link>
        <Button type="primary" onClick={this.onButtonClick}>显示/隐藏</Button>
        {isShowDesc ? <p>这里是详情信息</p> : ''}
        <Table dataSource={listData} columns={columns} rowKey="name" />
      </div>
    );
  }
}

// mapStateToProps 方法传的state是全局的store，我们只需要homeStore，返回homeStore

const mapStateToProps = state => {
  console.log('state:', state);
  return state.homeStore;
};

const mapDispatchToProps = dispatch => ({
  onToggerDesc: value => {
    dispatch({ type: 'home-show-desc', value });
  },
  onGetList: () => {
    getList({ dispatch });
  },
});

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(Home);
